<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.box{
				margin: 100px;
				display: flex
			}
			span{
				width: 30px;
				height: 30px;
				cursor: pointer;
				background-color: #666;
				margin: 5px;
				color: white;
				text-align: center;
				line-height: 30px;
				font-size: 14px;
			}
			.current{
				background-color: deeppink;
			}
			.box span:hover{
				background-color: deeppink;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<span class="current">1</span>
			<span>2</span>
			<span>3</span>
			<span>4</span>
			<span>...</span>
			<span>6</span>
			<span>7</span>
		</div>
	</body>
</html>
<script>
	
	let aSpan = document.querySelectorAll('.box span');
	
	//总页面
	let page = 14;
	
	// 默认设置
	aSpan[0].innerHTML = '1';
	aSpan[1].innerHTML = '2';
	aSpan[2].innerHTML = '3';
	aSpan[3].innerHTML = '4';
	aSpan[4].innerHTML = '...';
	aSpan[5].innerHTML = page - 1;
	aSpan[6].innerHTML = page;
	
	//批量监听
	aSpan.forEach((item, index) => {
		
		item.onclick = function(){
			
			//如果点击的是...不做事
			if(this.innerHTML == '...') return;
			
			//获取当前点击的值
			let nowNum = parseInt(this.innerHTML);
			
			//分为三种情况，有三种不同的交互
			if(nowNum > 0 && nowNum <= 3){
				// 设置
				aSpan[0].innerHTML = '1';
				aSpan[1].innerHTML = '2';
				aSpan[2].innerHTML = '3';
				aSpan[3].innerHTML = '4';
				aSpan[4].innerHTML = '...';
				aSpan[5].innerHTML = page - 1;
				aSpan[6].innerHTML = page;
				
				//排它
				for(let i = 0; i < aSpan.length; i++){
					aSpan[i].style.background = '#666';
				}
				// 设置当前项
				this.style.background = 'deeppink';
				
			}else if(nowNum >= 4 && nowNum < page - 2){
				// 设置
				aSpan[0].innerHTML = '1';
				aSpan[1].innerHTML = '...';
				aSpan[2].innerHTML = nowNum - 1;
				aSpan[3].innerHTML = nowNum;
				aSpan[4].innerHTML = nowNum + 1;
				aSpan[5].innerHTML = '...';
				aSpan[6].innerHTML = page;
				
				//排它
				for(let i = 0; i < aSpan.length; i++){
					aSpan[i].style.background = '#666';
				}
				// 设置当前项
				aSpan[3].style.background = 'deeppink';
				
			}else if(nowNum >= page - 2 && nowNum <= page){
				// 设置
				aSpan[0].innerHTML = '1';
				aSpan[1].innerHTML = '2';
				aSpan[2].innerHTML = '...';
				aSpan[3].innerHTML = page - 3;
				aSpan[4].innerHTML = page - 2;
				aSpan[5].innerHTML = page - 1;
				aSpan[6].innerHTML = page;
				
				//排它
				for(let i = 0; i < aSpan.length; i++){
					aSpan[i].style.background = '#666';
				}
				// 设置当前项
				this.style.background = 'deeppink';
			}		
		
			// 拿到这个当前页面，请求数据
			
		}
		
	});
	
</script>